<template>
  <div class="step-content">
    <template v-for="(item,index) in step">
      <div class="step-item" :class="active>index?'active':''">
        <div class="num">{{ index + 1 }}</div>
        <div class="name">{{ item }}</div>
      </div>
      <div v-if="step.length!==index+1" :class="active>index?'active':''" class="line"></div>
    </template>
  </div>
</template>

<script>
export default {
  name: "Step",
  props: {
    step: {
      type: Array
    },
    active: {
      type: Number,
      default: 1,
    }
  }
}
</script>

<style lang="scss" scoped>
.step-content {
  width: 70%;
  height: 60px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  .step-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    .num, .name {
      color: $darkGray;
      font-size: 14px;
    }
    .num{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25px;
      height: 25px;
      border: 1px solid $darkGray;
      border-radius:50%;
      margin-right: 10px;
    }
  }
  .step-item.active {
    .num, .name {
      color: $orange;
    }
    .num{
      border: 1px solid $orange;
      background: $orange;
      color: #fff;
    }
  }

  .line {
    background: $darkGray;
    height: 1px;
    flex-grow: 1;
    margin: 0 10px;
  }
  .line.active {
    background: $orange;
    height: 1px;
    flex-grow: 1;
  }
}
</style>
